<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
  import * as echarts from 'echarts'

  require('echarts/theme/macarons') // echarts theme
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      pieData: {
        type: Array,
        default: function () {
          return []
        }
      },

      height: {
        type: String,
        default: '350px'
      }
    },
    data() {
      return {
        chart: null,
        legend: [],
        list: [],
        myData: []
      }
    },
    watch: {
      myData: {
        handler(newV, oldV) {
          if (newV.length != 0) {
            // console.log(newV)

            this.legend = newV[0]

            let list = newV.slice(1)

            let result = []

            list.forEach((item, index) => {
              let obj = {}
              obj.value = item[1]
              obj.name = item[0]

              result.push(obj)

            })

            this.list = result

            this.initChart()

          }

        },
        deep: true
      },

    },
    mounted() {
      this.$nextTick(() => {
        // this.initChart()
        setTimeout(() => {
          this.myData = this.pieData

        }, 500)
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {

      initChart() {
        this.chart = echarts.init(this.$el, "macarons")
        let colors = ['rgb(250,200,88)', 'rgb(238,102,102)', 'rgb(119,192,222)', 'rgb(84,112,198)', 'rgb(145,204,117)']
        this.chart.setOption({
          title: {
            text: "有效专利类型分布"
          },
          color: colors,


          series: [{
            //   name: 'Access From',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c}({d}%)',
              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 3,
                  width: 3,
                  height: 3,
                  padding: [3, 3, 0, -12]
                },
                a: {
                  padding: [-30, 15, -20, 15]
                }
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              normal: {
                length: 5,
                length2: 10,
                lineStyle: {
                  width: 2
                }
              }
            },
            data: this.list

          }]
        })
      }
    }
  }
</script>
